<template>
  <div id="user-show">
    <el-table
      :data="users.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column
        type="index"
        label="#ID">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="userName">
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="foundTime">
      </el-table-column>
      <el-table-column
        label="状态"
        prop="start">
        <template scope="scope">
          <p v-if="scope.row.start===0">禁用</p>
          <p v-if="scope.row.start===1">启用</p>
        </template>
      </el-table-column>
      <el-table-column
        align="right" width="200px">

        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            size="mini"
            placeholder="输入关键字搜索"/>

        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "UserShow",
    data() {
      return {
        users: [],
        currentRow: null,
        search: '',
        pageNum: 1,
        pageSize: 5,
        total: 0
      }
    },
    methods: {
      // setCurrent(row) {
      //   this.$refs.singleTable.setCurrentRow(row);
      // },
      // handleCurrentChange(val) {
      //   this.currentRow = val;
      // },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.total = val;
        this.getUsers(1, val);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getUsers(val, this.pageSize);
      },
      handleEdit(index, row) {
        console.log(index, row);
        console.log(row.id)
        this.$router.push({name: 'user-edit', params: {id: row.id}})
      },
      handleDelete(index, row) {
        console.log(index, row);
        let _this = this

        this.$axios.delete("/user/" + row.id).then(function (data) {
          // this.$message.success('成功删除');
          _this.getUsers(_this.pageNum, _this.pageSize)
        }).catch(function (error) {
          // this.$message.error('删除失败');
        })
      },
      getUsers(pageNum, pageSize) {
        let _this = this

        this.$axios({
          url: "/user/" + pageNum + "/" + pageSize,
          method: 'get'
        }).then(function (data) {
          // console.log(data);
          // console.log(_this.total)
          // console.log(data.data.data.list)
          _this.users = data.data.data.list;
          _this.total = data.data.data.total;
          // this.users = data.data.list;
          // this.total = data.data.total
        })
      }
    },
    created() {
      // this.$http.get('http://localhost:3000/users').then((data) => {
      //   console.log(data)
      //   this.users = data.body
      // })
      this.getUsers(this.pageNum, this.pageSize);
    },
  }
</script>

<style scoped>
  #user-show {
    margin: 50px 150px;
    border: aqua;
    padding: initial;
  }

  .block {
    margin: 10px;
    padding: 10px 600px;
  }
</style>
